Working with JavaScript and Cascading Style Sheets

You can use JavaScript or a cascading style sheet to add custom functionality or styling to a widget. To do this, place the JavaScript or cascading style sheet (css) instructions in an external file, then register it in the codebehind file.

Here is an example of including a JavaScript file.

void EditEvent(string settings)
JS.RegisterJSInclude(this, _api.SitePath + "widgets/contentblock/jquery.cluetip.js", "EktronJqueryCluetipJS");

Here is an example of including a .css file.

Css.RegisterCss(this, _api.SitePath + "widgets/contentblock/CBStyle.css","CBWidgetCSS");

You must register JavaScript and .css files in an external file, as shown above. If you do not, the OnSubmit event places HTML in the TextArea field in encoded brackets (< >) and generates a dangerous script error.

The JS.RegisterJSInclude and Css.RegisterCss functions take three arguments.

Argument	Description	Example (from above code)
1	A reference to the control that needs the script or style sheet on the page. Typically, ‘this’ or ‘me’.	this
2	The URL of the script or style sheet being included. Ektron recommends prefixing the URL with a site path, so it can be used with URLs like http://localhost/ektrontech and http://ektrontech.	_api.SitePath + "widgets/contentblock/jquery.cluetip.js" _api.SitePath + "widgets/contentblock/CBStyle.css"
3	A unique key. Only include the script specified by a key once. Your organization should develop a standard way to define JavaScript and .css keys.	"EktronJqueryCluetipJS" “CBWidgetCSS”

Widgets use an update panel for partial postbacks. As a result, the ASP.NET tree view and file upload controls do not work with widgets. Ektron CMS400.NET has workarounds for these functions. For an example of a tree view, see the content block widget (site root/widgets/contentblock.ascx). For an Ajax file uploader, see the flash widget (site root/widgets/flash.ascx).